<template>
  <div>
    <div class="mtop">
      <div class="imgb">
        <img :src="love[0].pic" alt="" v-if="love.length" />
      </div>
      <div class="tit">
        <div>我喜欢的歌曲不一定都在这里</div>
      </div>
      <div class="btn" @click="$router.go(-1)">
        <span class="iconfont icon-fanhui-xianxing"></span>
        我的喜欢
      </div>
    </div>
    <dl class="musiclist">
      <dt
        @click="gotoplay(love[0].id, love[0].name, love[0].pic, love[0].author)"
        @click.once="pushlist"
        v-if="love.length"
      >
        <span class="iconfont icon-bofang"></span>
        播放全部<em>(共{{ love.length }}首)</em>
      </dt>
      <dt v-if="!love.length">
        <span class="iconfont icon-bofang"></span>
        播放全部<em>(共{{ love.length }}首)</em>
      </dt>
      <dd
        v-for="(item, index) in love"
        :key="index"
        @click="gotoplay(item.id, item.name, item.pic, item.author)"
        @click.once="pushlist"
      >
        <h3>{{ index + 1 }}</h3>
        <div>
          <p>{{ item.name }}</p>
          <span>{{ item.author[0].name | authorFn(item.author) }}</span>
        </div>
      </dd>
    </dl>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    gotoplay(...data) {
      if (this.love.length) {
        let playData = {
          id: data[0],
          name: data[1],
          pic: data[2],
          author: data[3],
        };
        this.$store.commit("curListFn", playData);
        this.$store.commit("playflagFn", true);
      }
    },
    pushlist() {
      if (this.love.length) {
        let list = [];
        this.love.forEach((item) => {
          list.push({
            id: item.id,
            name: item.name,
            pic: item.pic,
            author: item.author,
          });
        });
        this.$store.commit("allListFn", list);
      }
    },
  },
  filters: {
    authorFn(old, newd) {
      let str = "";
      newd.forEach((item) => {
        str = str + item.name + " / ";
      });
      str = str.substr(0, str.length - 2);
      return str;
    },
  },
  computed: {
    love() {
      return this.$store.state.love;
    },
  },
};
</script>
<style lang="less">
.mtop {
  height: 40vh;
  background-color: #ccc;
  position: relative;
  .imgb {
    height: 100%;
    img {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin-bottom: 20px;
      max-width: 100%;
      margin: auto;
    }
  }
  .tit {
    position: absolute;
    left: 18px;
    bottom: 25px;
    font-size: 5vw;
    font-weight: bolder;
    color: #fff;
    span {
      font-size: 3vw;
    }
  }
  .btn {
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 4vw;
    color: #fff;
    font-weight: bolder;
  }
}
.musiclist {
  width: 100%;
  height: calc(60vh + 12px);
  border-radius: 12px 12px 0 0;
  position: fixed;
  background-color: #f2f3f4;
  bottom: 0;
  overflow: scroll;
  dt {
    height: 46px;
    border-bottom: 2px solid #e2e2e2;
    font-size: 0.5em;
    line-height: 46px;
    display: flex;
    span {
      flex: 0 0 50px;
      font-size: 7vw;
      line-height: 46px;
      text-align: center;
    }
    em {
      font-style: normal;
      color: #ccc;
      font-size: 4vw;
    }
  }
  dd {
    height: 70px;
    display: flex;
    color: #707271;
    border-bottom: 2px solid #e2e2e2;
    h3 {
      flex: 0 0 50px;
      text-align: center;
      line-height: 78px;
      font-size: 0.5em;
    }
    div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      p {
        font-size: 0.5em;
        color: #444747;
      }
      span {
        font-size: 0.3em;
        color: #939494;
      }
    }
  }
}
</style>